import { Button, Input, Space } from "antd"
import { ChangeEvent, useContext, useState } from "react"
import { ListDispatchContext } from "./context"

function AddChild() {
  const [valueName, setValueName] = useState('')
  const dispatch = useContext(ListDispatchContext)!

  const onIpt = (e: ChangeEvent<HTMLInputElement>) => {
    setValueName(e.target.value)
  }

  const onAdd = () => {
    dispatch({
      type: 'ADD',
      listItem: {text: valueName}
    })
  }

  return (
    <div>
      <Space.Compact style={{ width: '100%' }}>
        <Input placeholder="请输入名称" value={valueName} onChange={onIpt} />
        <Button type="primary" onClick={onAdd}>新 增</Button>
      </Space.Compact>
    </div>
  )
}

export default AddChild